<template>
  <div class="flex-ai-c">
    <!-- <div class="button-text c-gray-blue f-14 c-pointer">
      全站导航
    </div>
    <div class="divider-line" /> -->
    <div
      class="mange-svg-icon"
      style="margin-right: 12px;"
      :title="showSide ? '折叠两侧':'打开两侧' "
    >
      <!-- <BKSvgIcon
        icon-class="svg-ysqxx-close-side"
      /> -->
      <BKSvgIcon
        :icon-class="showSide ? 'svg-ysqxx-open-side' :'svg-ysqxx-close-side'"
        @click="debounceToggleSide"
      />
    </div>
    <div
      class="mange-svg-icon"
      style="margin-right: 12px;"
      :title="showFullScreen ? '退出全屏':'进入全屏' "
    >
      <!-- <BKSvgIcon
        icon-class="svg-ysqxx-fullscreen"
      /> -->
      <BKSvgIcon
        :icon-class="showFullScreen ? 'svg-ysqxx-resize':'svg-ysqxx-fullscreen'"
        @click="debounceToggleFullScreen"
      />
    </div>
    <div
      class="mange-svg-icon"
    >
      <BKSvgIcon
        icon-class="svg-ysqxx-admin"
      />
    </div>
  </div>
</template>
<script>
import { debounce } from 'throttle-debounce'

export default {
  name: 'YsqxxManageInfo',
  data () {
    return {
      showSide: true,
      showFullScreen: false
    }
  },
  created () {
    this.debounceToggleSide = debounce(100, this.toggleSide)
    this.debounceToggleFullScreen = debounce(100, this.toggleFullScreen)
  },
  methods: {
    toggleSide () {
      this.showSide = !this.showSide
      this.$root.$emit('toggleSide', this.showSide)
    },
    toggleFullScreen () {
      this.showFullScreen = !this.showFullScreen
      if (!document.fullscreenElement) {
        // 进入全屏
        document.documentElement.requestFullscreen()
      } else {
        // 退出全屏
        if (document.exitFullscreen) {
          document.exitFullscreen()
        }
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.button-text {
  width: 103px;
  height: 32px;
  background: rgba(10, 53, 109, 0.7);
  // background: #0a356d;
  // opacity: 0.7;
  border: 1px solid #367bb1;
  border-radius: 4px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.divider-line {
  margin: 0 15px;
  width: 1px;
  height: 31px;
  background: linear-gradient(0deg, rgba(54, 124, 177, 0) 0%, #367cb1 49%, rgba(54, 124, 177, 0) 100%);
}

.mange-svg-icon {
  width: 24px;
  height: 24px;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #c9e7f1;

  &:hover {
    color: #fff;
    cursor: pointer;
  }
}
</style>
